<template>
	<view>
		<view class="title">编辑信息</view>
		<view class="headportrait" @click="changeAvatar">
			<image v-if="avarShow" :src="'http://124.70.161.103:8080'+newpic" mode="" ></image>
			<image v-else :src="avatar ? avatar:autoimg" class="image"></image>
		</view>
		<view class="bgcs">
			<view class="xinxibiaoji fname">
				<view class="titel-name">姓名</view>
				<view class="titel-info tname">{{userinfos.data.nickName}}</view>
			</view>
			<view class="xinxibiaoji">
				<view class="titel-name">部门<text>（登录后台设备）</text></view>
				<view class="titel-info">{{userinfos.data.dept.deptName}}</view>
			</view>
			<view class="xinxibiaoji">
				<view class="titel-name">职位<text>（登录后台设备）</text></view>
				<view class="titel-info">{{userinfos.postGroup}}</view>
			</view>
		</view>
		<view class="bgcsd">
			<view class="user-detals">
				<view class="detals-title">性别</view>
				<view class="choosed">
					<view class="">{{sex}}</view>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="user-detals">
				<view class="detals-title">生日</view>
				<view class="choosed">
					<view class="">-</view>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="user-detals">
				<view class="detals-title">地区</view>
				<view class="choosed">
					<view class="">-</view>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="user-detals phnum">
				<view class="detals-title">手机号</view>
				<view class="choosed">
					<view class="">{{userinfos.data.phonenumber}}</view>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bgcsd">
			<view class="user-detals">
				<view class="detals-title">微信</view>
				<view class="choosed">
					<view class="">-</view>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="user-detals phnum">
				<view class="detals-title">邮箱</view>
				<view class="choosed">
					<view class="">{{userinfos.data.email}}</view>
					<image src="../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<button type="primary"  @click="baocun()">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avarShow: false,
				avatar:'',
				autoimg:'../../static/autoimg.png',
				iconcheck:0,
				fileUrl: '',
				newpic:'',
				userinfos:"",
				sex:"",
			};
		},
		onLoad() {
		    let userinfos = uni.getStorageSync("details_userinfo")
		    this.userinfos= userinfos
		    // console.log(this.userinfos.data.avatar)  
			this.avatar = 'http://124.70.161.103:8080'+this.userinfos.data.avatar
			if(userinfos.data.sex==0){
				this.sex='男'
			}
			if(userinfos.data.sex==1){
				this.sex='女'
			}
			if(userinfos.data.sex==2){
				this.sex='保密'
			}
		},
		methods: {
			changeAvatar() { 
				let that = this
				uni.chooseImage({
					count: 1,
					success: function(res) {
						console.log(res)
						that.fileUrl = res.tempFilePaths[0]
					//	console.log(that.fileUrl)
						that.iconcheck=1;
						that.touxiang(that.fileUrl)
					},
					error:function(e) {
						console.log(e)
					}
				});
			},
			touxiang(path) {
				let usertoken = uni.getStorageSync("usertoken")
				console.log(path)
				uni.uploadFile({
				url: 'http://124.70.161.103:8080/system/user/profile/avatar',
				method: 'POST',
				filePath: path,
				name: 'avatarfile',
				header: {
					'Authorization' : usertoken
				},
				success: res => {
					console.log(res.data);
					let datad = JSON.parse(res.data)
					console.log(datad)
					this.newpic = datad.imgUrl
					console.log(this.newpic)
					this.avarShow = true
					// uni.showToast({
					// 	title: 11111,
					// 	icon: 'none'
					// });
				},
				fail: () => {},
				complete: () => {}
				});
			},
			baocun(){
				uni.switchTab({
					url:"../user/user"
				})
			}
		},
		
	}
</script>

<style lang="scss">
	* {
		// border: 1rpx solid;
	}

	page {
		background-color: #EFEFF4;
		padding: 0 0 1rpx 0;
	}

	.title {
		// position: fixed;
		background-color: #1E76FE;
		font-size: 32rpx;
		padding: 30rpx;
		border-top: 1rpx solid #3ED39B;
		color: white;
	}

	.headportrait {
		position: absolute;
		right: 40rpx;
		top: 30rpx;

		image {
			width: 140rpx;
			height: 140rpx;
			border: 6rpx solid white;
			border-radius: 100rpx;
		}
	}

	.bgcs {
		padding: 20rpx 30rpx;
		background-color: white;

		.xinxibiaoji {
			border-bottom: 4rpx solid #EFEFF4;
			padding: 20rpx 0 10rpx 0;

			.titel-name {
				font-size: 24rpx;

				text {
					color: #C4C4C4;
				}
			}

			.titel-info {
				font-size: 30rpx;
				margin-top: 15rpx;
				color: #9f9f9f;
			}

			.tname {
				color: #1E76FE;
			}
		}

		.fname {
			border-bottom: 4rpx solid #1E76FE;
		}
	}

	.bgcsd {
		background-color: white;
		margin-top: 20rpx;
		
		.user-detals {
			display: flex;
			justify-content: space-between;
			border-bottom: 4rpx solid #EFEFF4;
			margin: 0rpx 0 0rpx 30rpx;
			padding: 20rpx 40rpx 20rpx 0;

			.detals-title {
				font-size: 30rpx;
			}

			.choosed {
				display: flex;

				view {
					font-size: 30rpx;
					color: #C4C4C4;
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin: 6rpx 0 0 20rpx;
				}
			}
		} 
		.phnum{
			border-bottom: 0rpx;
		}
	}

	button {
		margin: 200rpx 5% 50rpx 5%;
		width: 90%;
		color: white;
	}
</style>
